import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Platform,
  Image,
  Animated,
  Easing,
  PanResponder
} from 'react-native';

export default class SimpleAnimate7 extends Component {
  state:{
    trans:AnimatedValueXY,
  }
  _panResponder:PanResponder;
  constructor(props) {
    super(props);
    this.state = {
      trans: new Animated.ValueXY(),
    };
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true, //响应手势
      onPanResponderMove: Animated.event(
        [null, {dx: this.state.trans.x, dy:this.state.trans.y}] // 绑定动画值
      ),
      onPanResponderRelease: ()=>{//手松开，回到原始位置
        Animated.spring(this.state.trans,{toValue: {x: 0, y: 0}}
        ).start();
      },
      onPanResponderTerminate:()=>{//手势中断，回到原始位置
        Animated.spring(this.state.trans,{toValue: {x: 0, y: 0}}
        ).start();
      },
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.View style={{width:80,
          height:80,
          borderRadius:40,
          backgroundColor:'blue',
          transform:[
            {translateY:this.state.trans.y},
            {translateX:this.state.trans.x},
          ],
        }}
                       {...this._panResponder.panHandlers}
        >
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop:25,
    flex: 1,
  },
});